<!--
 * @Author: Rachel 943701297@qq.com
 * @Date: 2022-06-29 21:49:16
 * @LastEditors: Rachel 943701297@qq.com
 * @LastEditTime: 2022-06-30 09:27:53
 * @FilePath: \JS\JSCode\DOM增删改.html
 * @Description: DOM增删改
 * 
 * Copyright (c) 2022 by Rachel 943701297@qq.com, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
    <link rel="stylesheet" href="./style/css.css">
    <script>
        window.onload = function() {
            // 创建一个"广州"节点,添加到#city下
            myClick("btn01", function () {
                let city = document.getElementById("city");
                let li = document.createElement("li");
                li.innerHTML = "广州";
                city.appendChild(li);
            })
            // 将"广州"节点插入到#bj前面
            myClick("btn02", function(){
                let city = document.getElementById("city");
                let li = document.createElement("li");
                li.innerHTML = "广州";
                let bj = document.getElementById("bj");
                city.insertBefore(li,bj);
            })
            // 使用"广州"节点替换#bj节点
            myClick("btn03", function(){
                let city = document.getElementById("city");
                let li = document.createElement("li");
                li.innerHTML = "广州";
                let bj = document.getElementById("bj");
                city.replaceChild(li,bj);
            })
            // 删除#bj节点
            myClick("btn04", function(){
                let city = document.getElementById("city");
                let bj = document.getElementById("bj");
                city.removeChild(bj);
            })
            // 读取#city内的HTML代码
            myClick("btn05", function(){
                let city = document.getElementById("city");
                alert(city.innerHTML);
            })
            // 设置#bj内的HTML代码
            myClick("btn06", function(){
                let bj = document.getElementById("bj");
                bj.innerHTML = "CDC";
            })
            // 创建一个"广州"节点,添加到#city下
            // 通过使用innerHTML的方法
            myClick("btn07", function(){
                let city = document.getElementById("city");
                city.innerHTML += "<li>广州</li>"
            })
        }
        function myClick(myStr, fun) {
            let btn = document.getElementById(myStr);
            btn.onclick = fun;
        } 
    </script>
</head>
<body>
    <div id="total">
        <div class="inner">
            <p>
                你喜欢哪个城市?
            </p>

            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>
            
        </div>
    </div>
    <div id="btnList">
        <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
        <div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
        <div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
        <div><button id="btn04">删除#bj节点</button></div>
        <div><button id="btn05">读取#city内的HTML代码</button></div>
        <div><button id="btn06">设置#bj内的HTML代码</button></div>
        <div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
    </div>
</body>
</html>